﻿<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
<title></title>
<link rel="shortcut icon" href="{{ static_url('base/images/logo.png') }}">
<link rel="stylesheet" href="{{ static_url('base/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ static_url('base/css/bootstrap-movie.css') }}">
<link rel="stylesheet" href="{{ static_url('base/css/animate.css') }}">
<link rel="stylesheet" href="{{ static_url('base/css/mycss.css') }}">
<link rel="stylesheet" type="text/css" href="{{static_url('m3u8/dplayer/DPlayer.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{static_url('m3u8/css/share.css')}}">
<style>
.navbar-brand>img {
display: inline;
}
.media{
padding:3px;
border: 1px solid #ccc
}
.container {
padding-right: 15px;
padding-left: 15px;
width: 98%;
/* margin-right: auto; */
/* margin-left: auto; */
}
.row {
padding-right: 15px;
padding-left: 15px;
/*margin: 0 140px;*/
}
.row2 {
padding-right: 15px;
padding-left: 15px;
margin: 0 140px;
}
.setarea{
margin: 0 -30px;
}
.col-md-3 {
width: 33%;
min-height: 290px;
}
.menu {
	width: 130px;
	position: absolute;
	z-index: 2;
	background: #181818;
	display: none;
}
</style>


<body style="background-color: #292929;" class="">

	<div class="container" style="padding: 0;width: 100%;">

		<div class="row2" id="row2" style="width: 100%;;margin: 0;padding: 0;float: left;">
			<div class="menu" id="menu">
				<div align="center">
					<div style="margin:3px;"><a href="javascript:;" onclick="menusubmit(this);" style="color: wheat;" value="1">to area 1</a></div>
					<div style="margin:3px;"><a href="javascript:;" onclick="menusubmit(this);" style="color: wheat;" value="2">to area 2</a></div>
					<div style="margin:3px;"><a href="javascript:;" onclick="menusubmit(this);" style="color: wheat;" value="3">set video logo</a></div>
				</div>
			</div>
            <div class="menu" id="menu-title" style="width: 90px">
				<div align="center">
					<div style="margin:3px;"><a href="javascript:;" onclick="menusubmit(this);" style="color: wheat;" value="1">复制标题</a></div>
					<div style="margin:3px;"><a href="javascript:;" onclick="menusubmit(this);" style="color: wheat;" value="2">复制链接</a></div>
				</div>
			</div>
	        <div class="col-md-12 videoname" area="0" style="height: 0;padding: 0;z-index: 1;">
	        	<input type="text" id="id" name="id" value="" hidden>
	        	<input id='copydata' v-model='product_url' style='opacity: 0;position: absolute;width: 20px;' type="text" >
	            <h3 class="panel-title" style="float: left;color: aqua;">
                    <span id="icon" class="glyphicon glyphicon-film" ondblclick="toFuli();" style="cursor:pointer;"></span>
                    <span id="video-name" value="" style="cursor:pointer;"></span>
                </h3>
	            <span class="btn btn-success fileinput-button" style="display: none;float: right;padding: 0px 2px;height: 18px;font-size: 12px;">
	            	<span>Img</span>
	            	<input name="file" id="logo" multiple="multiple" onchange="handleFile(this)" type="file" style="cursor: pointer;">
	            </span>
	        </div>
	        <div class="col-md-12" style="padding: 0">
	            <div id="dplayer-area">
	                <div class="video" id="mvideo" active="0"></div>
	            </div>
	        </div>
	        <div class="col-md-12">
	            <div id="dplayer-area2">
	                <div class="video" id="mvideo2" active="0"></div>
	            </div>
	        </div>
	        <div class="videolist col-md-12" id="videolist" style="margin: 0;padding: 0;display: none;background: #292929;position: fixed;width: 30px;right:0;height: 100%;">
	        </div>
		</div>


		<div class="row setarea" style="float: left; width: 170px; margin: 0px; padding: 0px; display: none;">
			<div class="col-md-12" style="margin-top: 20px;color: #707476;background: #003c3e;padding-top: 5px;">
				<input type="text" id="currentTime" name="currentTime" value="" hidden>
				<form id="setdata" autocomplete="off">
					<input type="text" id="section" name="section" value="" hidden>
					<div style="width: 150px;float: left;margin-bottom: 0px;">
					    <div style="margin-bottom: 6px;">
					    	<p name="start-time1" style="float: left;cursor: pointer;margin-right: 5px;">开始1:</p>
					    	<input type="text" name="start-time1"  style="width: 60px;height: 20px;font-size:12px;">
					    	<a onclick="jumpPlay(this);"> 预览</a>
						</div>
						<div style="margin-bottom: 0px;">
						    <p name="end-time1" style="float: left;cursor: pointer;margin-right: 5px;position: relative;left: -45px;">结束1:</p>
						    <input type="text" name="end-time1"  style="width: 60px;height: 20px;position: relative;left: -45px;font-size:12px;">
						    <a onclick="jumpPlay(this);" style="position: relative;top: -20px; left: 20px;"> 预览</a>
						</div>
					</div>
                    <div style="width: 150px;float: left;margin-bottom: 0px;">
					    <div style="margin-bottom: 6px;">
					    	<p name="start-time2" style="float: left;cursor: pointer;margin-right: 5px;">开始2:</p>
					    	<input type="text" name="start-time2"  style="width: 60px;height: 20px;font-size:12px;">
					    	<a onclick="jumpPlay(this);"> 预览</a>
						</div>
						<div style="margin-bottom: 0px;">
						    <p name="end-time2" style="float: left;cursor: pointer;margin-right: 5px;position: relative;left: -45px;">结束2:</p>
						    <input type="text" name="end-time2"  style="width: 60px;height: 20px;position: relative;left: -45px;font-size:12px;">
						    <a onclick="jumpPlay(this);" style="position: relative;top: -20px; left: 20px;"> 预览</a>
						</div>
					</div>
                    <div style="width: 150px;float: left;margin-bottom: 0px;">
					    <div style="margin-bottom: 6px;">
					    	<p name="start-time3" style="float: left;cursor: pointer;margin-right: 5px;">开始3:</p>
					    	<input type="text" name="start-time3"  style="width: 60px;height: 20px;font-size:12px;">
					    	<a onclick="jumpPlay(this);"> 预览</a>
						</div>
						<div style="margin-bottom: 0px;">
						    <p name="end-time3" style="float: left;cursor: pointer;margin-right: 5px;position: relative;left: -45px;">结束3:</p>
						    <input type="text" name="end-time3"  style="width: 60px;height: 20px;position: relative;left: -45px;font-size:12px;">
						    <a onclick="jumpPlay(this);" style="position: relative;top: -20px; left: 20px;"> 预览</a>
						</div>
					</div>
                    <div style="width: 150px;float: left;margin-bottom: 0px;">
					    <div style="margin-bottom: 6px;">
					    	<p name="start-time4" style="float: left;cursor: pointer;margin-right: 5px;">开始4:</p>
					    	<input type="text" name="start-time4"  style="width: 60px;height: 20px;font-size:12px;">
					    	<a onclick="jumpPlay(this);"> 预览</a>
						</div>
						<div style="margin-bottom: 0px;">
						    <p name="end-time4" style="float: left;cursor: pointer;margin-right: 5px;position: relative;left: -45px;">结束4:</p>
						    <input type="text" name="end-time4"  style="width: 60px;height: 20px;position: relative;left: -45px;font-size:12px;">
						    <a onclick="jumpPlay(this);" style="position: relative;top: -20px; left: 20px;"> 预览</a>
						</div>
					</div>
                    <div style="width: 150px;float: left;margin-bottom: 0px;">
					    <div style="margin-bottom: 6px;">
					    	<p name="start-time5" style="float: left;cursor: pointer;margin-right: 5px;">开始5:</p>
					    	<input type="text" name="start-time5"  style="width: 60px;height: 20px;font-size:12px;">
					    	<a onclick="jumpPlay(this);"> 预览</a>
						</div>
						<div style="margin-bottom: 0px;">
						    <p name="end-time5" style="float: left;cursor: pointer;margin-right: 5px;position: relative;left: -45px;">结束5:</p>
						    <input type="text" name="end-time5"  style="width: 60px;height: 20px;position: relative;left: -45px;font-size:12px;">
						    <a onclick="jumpPlay(this);" style="position: relative;top: -20px; left: 20px;"> 预览</a>
						</div>
					</div>
                    <div style="width: 150px;float: left;margin-bottom: 0px;">
					    <div style="margin-bottom: 6px;">
					    	<p name="start-time6" style="float: left;cursor: pointer;margin-right: 5px;">开始6:</p>
					    	<input type="text" name="start-time6"  style="width: 60px;height: 20px;font-size:12px;">
					    	<a onclick="jumpPlay(this);"> 预览</a>
						</div>
						<div style="margin-bottom: 0px;">
						    <p name="end-time6" style="float: left;cursor: pointer;margin-right: 5px;position: relative;left: -45px;">结束6:</p>
						    <input type="text" name="end-time6"  style="width: 60px;height: 20px;position: relative;left: -45px;font-size:12px;">
						    <a onclick="jumpPlay(this);" style="position: relative;top: -20px; left: 20px;"> 预览</a>
						</div>
					</div>
					<div style="width: 150px;float: left;padding-right: 13px;">
						<div style="float: left;">
							<p name="msg" style="margin: 0 0 5px;">状态</p>
						</div>
						<div style="float: right;">
							<span name="setdata" type="button" onclick="setsubmit();" style="cursor: pointer;color: aqua;">发送</span>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>

	<!--底部-->
	<div class="container2" style=""></div>
	<!--底部-->
<!--	<script type="text/javascript" src="{{static_url('base/js/canvas-toBlob.js')}}"></script>-->
	<script src="{{ static_url('base/js/jquery.min.js') }}"></script>
	<script src="{{ static_url('base/js/bootstrap.min.js') }}"></script>
	<script src="{{ static_url('base/js/jquery.singlePageNav.min.js') }}"></script>
	<script src="{{ static_url('base/js/wow.min.js') }}"></script>
	<script src="{{ static_url('lazyload/jquery.lazyload.min.js') }}"></script>

	<script type="text/javascript" src="{{static_url('m3u8/dplayer/hls.min.js')}}" charset="utf-8"></script>
    <script type="text/javascript" src="{{static_url('m3u8/dplayer/flv.min.js')}}"></script>
    <script type="text/javascript" src="{{static_url('m3u8/dplayer/DPlayer.min.js')}}"></script>
	<script type="text/javascript" src="{{static_url('m3u8/ckplayer/ckplayer.js')}}" charset="utf-8"></script>
	<script type="text/javascript" src="{{static_url('m3u8/js/jquery-1.11.2.min.js')}}" charset="utf-8"></script>
	<script type="text/javascript" src="{{static_url('m3u8/js/m3u8-parser.min.js')}}"></script>
	<script type="text/javascript" src="{{static_url('m3u8/js/index.js')}}" charset="utf-8"></script>
	<script type="text/javascript">
        var isAndroid,isiOS,clientHeight;
        var n = localStorage.getItem('mvideo-size',1);
        if(n=='null'){n=1}
        var inright = false;
        var intop = false;
        var mvideosize = n;
        var movie_list = JSON.parse(localStorage.getItem('playlist'));
        if(movie_list==null){movie_list=[]}
        var videoid = "";
        var name = "";
        var main = "";
		var nextid = "";
        var area = "";
	    var xml = "";
	    var pic = "";
        var urls = "";
	    var box = "mvideo";
	    var playertype = "dplayer" ; //如果需要强制ckplayer则改为ckplayer
	    var t = BrowserType();
	    if (t && t.indexOf("IE") >= 0  ){playertype = "ckplayer"}

		/**
		* $icon: 文件上传中loading图标
		* fs: 上传的文件（$("#file")[0].files）
		* max_size: 文件大小的最大值（1024 * 1024 * 100为100M）
		*/
		function handleFile(obj) {
			// let $icon = $(".upload-icon");
			let formData = new FormData();
			let id = $('#id').attr("value");
			let fs = $('#logo')[0].files;
			let max_size = 1024 * 1024 * 100;
			for (let i = 0; i < fs.length; i++) {
				let d = fs[0];
				if(d.size <= max_size){  //文件必须小于100M
				  if(/.(png|jpg|jpeg|bmp|gif)$/.test(d.name)){ //文件必须为文档
				  	formData.append("image", fs[i]);  //文件上传处理
				  }else{
				    alert('上传文件必须是图片！');
				    return false
				  }

				}else{
				  alert('上传文件过大！');
				  return false
				}
			}

			$.ajax({
			type: "POST",
			url: "/uploader/file?id="+id,
			data: formData,
			cache: false,
			processData: false,
			contentType: false
			}).then(res => {

			if (res.code == 200) {
				// alert(res.msg);

			}
			});
		}
		function copyUrl(value){
            if(value==1){
                $('#copydata').val($('#video-name').text());
            } else{
                $('#copydata').val(encodeURI(location.origin+$('#video-name').attr("value")));
            }
            var copydata = $('#copydata');
            copydata.select();
            document.execCommand("Copy");//执行复制
		}
		function toFuli(){
			var id = $('#id').val();
			$.ajax({
	            type: "GET",
	            url: "/switchMovie?id="+id,
	            data: '',
	            success:function(res){
                    var area = res.area;
                    $('.videoname').attr('area',area);
					if(area==0){
                        $('.setarea').hide();
					}
	            }
	        })
		}
		function setsubmit(){	// 切割电影
			var data = $('#setdata').serialize();
			$("button[name$='setdata']").attr('disabled',true);
			$("p[name$='msg']").text("处理中");
			$.ajax({
				url:"/cutvideo",
				type:"POST",
				data:data,
				success:function(res){
					// console.log(res);
					$("button[name$='setdata']").attr('disabled',false);
					$("p[name$='msg']").text("完成");
					$('input[name$="start-time1"]').attr('value','');
					$('input[name$="end-time1"]').attr('value','');
					$('input[name$="start-time2"]').attr('value','');
					$('input[name$="end-time2"]').attr('value','');
					$('input[name$="start-time3"]').attr('value','');
					$('input[name$="end-time3"]').attr('value','');
					$('input[name$="start-time4"]').attr('value','');
					$('input[name$="end-time4"]').attr('value','');
					$('input[name$="start-time5"]').attr('value','');
					$('input[name$="end-time5"]').attr('value','');
					$('input[name$="start-time6"]').attr('value','');
					$('input[name$="end-time6"]').attr('value','');
				}
			});
		}
		function showset(obj){
			if($('.setarea').is(':hidden')){
				w = clientWidth-210 +'px';
				$('.row2').css('width',w);
                $('.row2').css('float','left');
				$('.setarea').show();
				$(obj).text('Hide');
				cutmode(1);
			}else{
				$('input[name$="start-time1"]').attr('value','');
				$('input[name$="end-time1"]').attr('value','');
				$('input[name$="start-time2"]').attr('value','');
				$('input[name$="end-time2"]').attr('value','');
				$('input[name$="start-time3"]').attr('value','');
				$('input[name$="end-time3"]').attr('value','');
				$('input[name$="start-time4"]').attr('value','');
				$('input[name$="end-time4"]').attr('value','');
				$('input[name$="start-time5"]').attr('value','');
				$('input[name$="end-time5"]').attr('value','');
				$('input[name$="start-time6"]').attr('value','');
				$('input[name$="end-time6"]').attr('value','');
				$('.setarea').hide();
				$('.row2').css('width','100%');
                $('.row2').css('float','unset');
				$(obj).text('Cut');
				cutmode(0);
			}
		}
		function cutmode(n){
			// 1切割模式，0正常播放模式
			to_cut_mode(n);
		}
		function switchVideo(obj){	// 切换到对应片段
			var url = $(obj).attr('url');
			switchMovie(url);
		}
        function getNextId(next='next'){
            var index = movie_list.indexOf(videoid);
            if(next=='next'){
                if(index<movie_list.length-1){
                    var id = movie_list[index+1];
                }else{
                    var id = movie_list[0];
                }
            }else{
                if(index>0){
                    var id = movie_list[index-1];
                }else{
                    var id = movie_list[movie_list.length-1];
                }
            }
            return id;
        }

        function mvideoSize(n){
            n = Number(n);
            var winWidth = window.innerWidth;
            var movieWidth = winWidth*n;
            $('.dplayer-video-current').css('width',n*100+'%');
            $('.dplayer-video-current').css('margin-left',(winWidth-movieWidth)/2+'px');
            localStorage.setItem('mvideo-size',n);
        }
		function delThisVideo(obj){		// 删除电影片段
			var id = $('#id').attr('value');
			var url = $(obj).attr('currenturl');
			$.ajax({
				url:'/delcutvideo',
				type:'GET',
				data:'id='+id+'&url='+url,
				success:function(res){
					// console.log(res);
				}
			});
		}
		function menusubmit(obj){
            var parentid = $(obj).parent().parent().parent().attr('id');
			var value = $(obj).attr('value');
            if(parentid=='menu'){
                if(value!=3){
                    $.ajax({
                        type: "GET",
                        url: "/switchArea?id="+videoid+"&area="+value,
                        data: '',
                        success:function(res){
                            // console.log(res);
                        }
                    })
                }else{
                    $('#logo').click();
                }
            }else{
                copyUrl(value);
            }

		}
        function loadVideoUrls(urls){
            var div = '';
            for(var i in urls){
                var url = urls[i];
                div += '<span url="'+url[0]+'" onclick="switchVideo(this);" style="margin: 2px 7px;color: aqua;cursor: pointer;float: left;">'+url[1]+'</span>'
            }
            div += '<span id="next_movie" onclick="switchNextVideo();" style="margin: 2px 2px;color: aqua;cursor: pointer;float: left;font-size: 12px;">Next</span>\
	        	<span name="del" currenturl="'+urls[0][0]+'" onclick="delThisVideo(this);" style="margin: 2px 5px;color: aqua;cursor: pointer;float: left;font-size: 12px;">Del</span>\
                <span class="showset" name="showset" type="button" onclick="showset(this);" style="color: antiquewhite;border: antiquewhite;cursor: pointer;margin: 2px 5px;float: left;font-size: 12px;">Cut</span>';
            $('.videolist').html(div);
        }
        function getVideoUrls(urls){
            var ulist = [];
            for(var i in urls){
                ulist.push(urls[i][0])
            }
            return ulist
        }
        function switchNextVideo(next='next'){	// 切换下一部电影
            var id = getNextId(next);
            if(id!=""){
                var currenturl = window.location.href;
                var newurl = currenturl.replace(videoid,id);
                history.pushState('','',newurl);
                videoid = id;
                playmovie();
            }else{
                alert('next is null')
            }
        }
        function playmovie(){
            var path = window.location.pathname;
            var query = window.location.search;
            path = path.split('/');
            var section = path[path.length-1];
            if(!isNaN(Number(section))){query='?section='+section}
            $.get('/playvideo'+query,function (res){
                res = JSON.parse(res);
                if(res.code==0){
                    var movie = res.data;
                    videoid = movie.section;
                    name = movie.name;
                    author = movie.author;
                    main = movie.url;
                    nextid = getNextId('next');
                    area = movie.area;
                    ftype = movie.ftype;
                    xml = '';
                    pic = '';
                    urls = getVideoUrls(movie.urls);
                    loadVideoUrls(movie.urls);
                    var title = name;
                    if(author!=''){title += '（'+author+'）'}
                    $('title').text(name);
                    $('#id').attr('value',videoid);
                    $('#video-name').attr('value',main);
                    $('#video-name').attr('author',author);
                    $('#video-name').text(title);
                    $('.videoname').attr('area', area);
                    $('#section').attr('value',videoid);
                    if(area==0 &&!(isAndroid || isiOS)) {
                        $('#row2').css('float', 'left');
                        $('.videolist').hide();
                    }
                    if(ftype=='m3u8'){
                        init();
                    }else{
                        var dp1 = new DPlayer({
                            element: document.getElementById('mvideo'),                        // 可选，player元素
                            autoplay: false,                                                  // 可选，自动播放视频，不支持移动浏览器
                            preload: 'auto',
                            theme: '#2620ff',                                                  // 可选，主题颜色，默认: #b7daff
                            loop: false,                                                       // 可选，循环播放音乐，默认：true
                            lang: 'zh',                                                        // 可选，语言，`zh'用于中文，`en'用于英语，默认：Navigator language
                            screenshot: true,                                                 // 可选，启用截图功能，默认值：false，注意：如果设置为 true，视频和视频截图必须启用跨域
                            hotkey: true,                                                     // 可选，绑定热键，包括左右键和空格，默认值：true
                            volume: 0.5,
                            video: {
                                url: main,
                                pic: "",
                                type: 'auto'                                         // 可选，视频截图
                            },
                        });
                    }
                }else{
                    alert(res.msg)
                }
            })
        }
        const getWindowInfo = () =>{
            const windowInfo = {
                width: window.innerWidth,
                hight: window.innerHeight
            }
            clientHeight = windowInfo.hight;
            clientWidth = windowInfo.width;
            $('#dplayer-area').css('height',clientHeight-2+'px');
            if(!$('.setarea').is(':hidden')){
                w = clientWidth-210 +'px';
				$('.row2').css('width',w);
            }
        }
        const debounce = (fn,delay)=>{
            let timer;
            return function (){
                if(timer){
                    clearTimeout(timer)
                }
                timer = setTimeout(()=>{
                    fn();
                },delay);
            }
        }
        const cancalDebounce = debounce(getWindowInfo,200);
        window.addEventListener('resize',cancalDebounce);
	    $(document).ready(function() {
            var u = navigator.userAgent;
            isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            if (!(isAndroid || isiOS)) {
                clientHeight = document.documentElement.clientHeight;
                clientWidth = document.documentElement.clientWidth;
                $('#row2').css('float','unset');
                $('#dplayer-area').css('height',clientHeight-2+'px');
                $('.videolist').hide();
			}else{
				$('.showset').hide();
			}
            playmovie();

			// 禁用form表单请求
			$("form").submit(function(e){
				e.preventDefault();
			})
			$("p",$("#setdata")).click(function(e){	// 获取片段时间
				var name = $(this).attr("name");
				var t = getprogress();
				var H = (Array(2).join("0") + Math.floor(t/3600)).slice(-2);
				var M = (Array(2).join("0") + Math.floor((t%3600)/60)).slice(-2);
				var S = (Array(2).join("0") + parseInt((t%3600)%60)).slice(-2);
				var value = H+":"+M+":"+S;
				$('input[name$="'+name+'"]').attr('value',value);
				// play();
				// $('.dplayer-play-icon').focus();
				// document.getElementById('mvideo').focus();
			});
			$("a",$("#setdata")).click(function(e){		// 片段预览
				var value = $('input',$(this).parent()).val();
				var section = $('#section').val();
				$.ajax({
					url:'/cutvideo',
					type:'GET',
					data:'section='+section+'&cuttime='+value,
					success:function(res){
						value = res.data;
						// console.log(value);
						play_to(value);
					}
				});
			});
			// 设置右击事件
			$('#icon').on('contextmenu',function (e){
				var x=e.clientX;
				var y=e.clientY;
				$('#menu').show().css({left:x,top:y});
				return false;	// 屏蔽默认右击事件
			})
            $('#video-name').on('contextmenu',function (e){
                var x=e.clientX;
				var y=e.clientY;
				$('#menu-title').show().css({left:x,top:y});
				return false;	// 屏蔽默认右击事件
            })
			$(document).on('wheel',function(event){
				event = event || window.event;
				var wheel = event.originalEvent.wheelDelta;
				if(wheel && event.altKey){	// 鼠标滚轮控制音量
					if(wheel<0){
						volume_to(0.02);
					}else{
						volume_to(-0.02);
					}
				}else{						// 鼠标滚轮控制播放进度
					if (wheel){
						if(wheel<0){
							var t = getprogress();
							play_to(t+5.0);
						}else{
							var t = getprogress();
							if(t<5.0){
								play_to(0.0);
							}else{
								play_to(t-5.0);
							}
						}
					}
				}
			});
			$(document).on('click',function(e){	// 是否激活播放区域
				$('.menu').hide();	// 隐藏菜单
				var father = document.getElementById('mvideo');
				var son = e.target;
				if ($.contains(father,son)){
					$(father).attr('active',1);
				}else{
					$(father).attr('active',0);
				}
			})
			$(document).on('keyup',function(e){
                var key = e.keyCode;
                {#console.log(key);#}
				if($('#mvideo').attr('active')=='0'){   // 未激活播放区域时，也支持方向键控制播放
                    var t = getprogress();
                    if (key==37){   // 方向右
                        if(e.ctrlKey){
                            play_to(t-30.0)
                        }else{
                            play_to(t-5.0)
                        }
                    }else if(key==39){  // 方向左
                        if(e.ctrlKey){
                            play_to(t+30.0)
                        }else if(e.shiftKey){
                            switchMovie('');
                        }else{
                            play_to(t+5.0)
                        }
                    }else if(key==38){  // 方向上
                        volume_to(0.05);
                    }else if(key==40){  // 方向下
                        volume_to(-0.05);
                    }else if(key==32){  // 空格键
                        pause()
                    }
                }
                if(key==49 || key==97){    // 1 上一个片段
                    switchMovie("pre");
                }else if(key==50 || key==98){  // 2 下一个片段
                    switchMovie("next");
                }else if(key==51 || key==99){  // 3 上一个电影
                    switchNextVideo('pre');
                }else if(key==52 || key==100){  // 4 下一个电影
                    switchNextVideo("next");
                }else if(key==53 || key==101){  // 5 50%大小
                    mvideoSize(0.5);
                }else if(key==54 || key==102){  // 6 60%大小
                    mvideoSize(0.6);
                }else if(key==55 || key==103){  // 7 70%大小
                    mvideoSize(0.7);
                }else if(key==56 || key==104){  // 8 80%大小
                    mvideoSize(0.8);
                }else if(key==57 || key==105){  // 9 90%大小
                    mvideoSize(0.9);
                }else if(key==48 || key==96){  // 0 100%大小
                    mvideoSize(1);
                }
                console.log(key);
            })
			$(document).on('mousemove',function (e){
				// console.log(e.pageY)
				if(e.pageY<20 && intop==false){
                    if(e.pageX<120){
                        intop = true;
                        $('.videoname').show();
                        if(intopTimer){clearInterval(intopTimer)}
                    }
				}else if(e.pageY>20 && intop==true){
                    intop = false
                    intopTimer = setInterval(function (){
                        $('.videoname').hide();
                        clearInterval(intopTimer);
                    },5000)
                }
                if(area==1 || area==2){
                    if(e.pageX>=clientWidth-40 && inright==false){
                        inright = true;
                        $('.videolist').show();
                        if(inrightTimer){
                            clearInterval(inrightTimer);
                        }
                    }else if(e.pageX<clientWidth-40 && inright==true){
                        inright = false;
                        inrightTimer = setInterval(function (){
                            $('.videolist').hide();
                            clearInterval(inrightTimer);
                        },3000)
                    }
                }
			})
            $(document).mouseleave(function (){
                if(inright==true){
                    inright = false;
                    inrightTimer = setInterval(function (){
                        $('.videolist').hide();
                        clearInterval(inrightTimer);
                    },3000)
                }else if(intop==true){
                    intop = false
                    intopTimer = setInterval(function (){
                        $('.videoname').hide();
                        clearInterval(intopTimer);
                    },5000)
                }
            })
			intopTimer = setInterval(function (){
                $('.videoname').hide();
                clearInterval(intopTimer);
            },5000)
	    })
	</script>
</body>
</html>